<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>分类页</title>
        <base th:href="@{/}"/>
        <link rel="stylesheet" href="static/css/minireset.css" />
        <link rel="stylesheet" href="static/css/common.css" />
        <link rel="stylesheet" href="static/css/iconfont.css" />
        <link rel="stylesheet" href="static/css/index.css" />
        <link rel="stylesheet" href="static/css/swiper.min.css" />
        <link rel="stylesheet" href="static/css/book_sort.css" />
        <!-- 引入vue -->
        <script src="static/script/vue.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入axios -->
        <script src="static/script/axios.js" type="text/javascript" charset="utf-8"></script>
        <!--    引入jquery-->
        <script src="static/script/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>
        <!--公共头部 开始-->
        <div class="blankHead zwfl_head">
            <div class="n1_header" style="box-shadow: none;">
                <div class="n1_header_wrap">
                    <h1>
                        <a href="#" class="header-logo"></a>
                    </h1>
                    <div class="n1_headerR">
                        <ul class="n1_nav">
                            <li><a href="index.html">首页</a></li>
                            <li class="current"><a href="javascript:getpageByType(1,'001003'); void(0);" onclick="getpageByType(1,'001003')">分类</a></li>
                            <li><a href="#">排行</a></li>
                        </ul>
                        <div class="n1_search">
                            <div class="header-search" style="margin-top: 10px;margin-left: 130px;">
                                <input type="text" id="keyInput" placeholder="书名/作者" value="" />
                                <button class="iconfont icon-search" onclick="getpageByKey(1)"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--公共头部 end-->
        <!-- 内容部分 start       -->
        <div class="content">
            <div class="genre">
                <div class="difgenre">
                    <span class="left">类型</span>
                    <div class="right">
                        <ul>
                            <li class="current" id="t1"><a href="javascript:getpageByType(1,'001003',1); void(0);" onclick="getpageByType(1,'001003',1)">小说</a></li>
                            <li id="t2"><a href="javascript:getpageByType(1,'001002',2); void(0);" onclick="getpageByType(1,'001002',2)">青春文学</a></li>
                            <li id="t3"><a href="javascript:getpageByType(1,'001001',3); void(0);" onclick="getpageByType(1,'001',3)">文学</a></li>
                            <li id="t4"><a href="javascript:getpageByType(1,'002',4); void(0);" onclick="getpageByType(1,'002',4)">社科</a></li>
                            <li id="t5"><a href="javascript:getpageByType(1,'002001',5); void(0);" onclick="getpageByType(1,'002001',5)">管理</a></li>
                            <li id="t6"><a href="javascript:getpageByType(1,'003',6); void(0);" onclick="getpageByType(1,'003',6)">少儿</a></li>
                            <li id="t7"><a href="javascript:getpageByType(1,'004',7); void(0);" onclick="getpageByType(1,'004',7)">艺术</a></li>
                            <li id="t8"><a href="javascript:getpageByType(1,'005',8); void(0);" onclick="getpageByType(1,'005',8)">生活周边</a></li>
                            <li id="t9"><a href="javascript:getpageByType(1,'006',9); void(0);" onclick="getpageByType(1,'006',9)">文教</a></li>
                        </ul>
                    </div>
                </div>
                <div class="difgenre other">
                    <span class="left">编程</span>
                    <div class="right">
                        <ul>
                            <li class="current" id="t10"><a href="#">全部</a></li>
                            <li id="t11"><a href="javascript:getpageByType(1,'006001',11); void(0);" onclick="getpageByType(1,'006001',11)">java</a></li>
                            <li id="t12"><a href="javascript:getpageByType(1,'006003',12); void(0);" onclick="getpageByType(1,'006003',12)">php</a></li>
                            <li id="t13"><a href="javascript:getpageByType(1,'006004',13); void(0);" onclick="getpageByType(1,'006001',13)">python</a></li>
                            <li id="t14"><a href="javascript:getpageByType(1,'006005',14); void(0);" onclick="getpageByType(1,'006001',14)">pm</a></li>
                            <li id="t15"><a href="javascript:getpageByType(1,'006006',15); void(0);" onclick="getpageByType(1,'006006',15)">go</a></li>
                            <li id="t16"><a href="javascript:getpageByType(1,'006002',16); void(0);" onclick="getpageByType(1,'006002',16)">前端</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <script>
                //  jquery 分类查询
                function getpageByType(currentPage,t_id,t_t) {
                    var i=1
                    while(i<17){
                        document.querySelector('#t'+i).className='';
                        i++;
                    }
                    if (t_t<10){
                        document.querySelector('#t10').className='current';
                    }
                    document.querySelector('#t'+t_t).className='current';
                    //发送ajax请求
                    $.get("http://localhost:8080/bookstore/bookManager", {
                        pageNo: currentPage,
                        typeId: t_id,
                        method: 'pageByType'
                    }, function (pb) {
                        var spans = "";
                        //计算上一页的页码
                        var beforeNum = pb.pageNo - 1;
                        if (beforeNum <= 0) {
                            beforeNum = 1;
                            var pre = '<a href="javascript:getpageByType('+beforeNum+',\''+t_id+'\','+t_t+'); void(0);" onclick="getpageByType('+beforeNum+',\''+t_id+'\','+t_t+')" class="up noClick"><i>上一页</i></a>';
                        }else{
                            var pre = '<a href="javascript:getpageByType('+beforeNum+',\''+t_id+'\','+t_t+'); void(0);" onclick="getpageByType('+beforeNum+',\''+t_id+'\','+t_t+')" class="up"><i>上一页</i></a>';
                        }
                        //上一页
                        spans += pre;
                        //1.2展示分页页码
                        /*
                        一共展示10个页码，能够达到前5后4的效果
                        如果前面不够5个，后面补齐总数到10个
                        如果后面不足4个，前边补齐总数到10个
                        */
                        //定义开始位置 begin，结束位置 end
                        var begin;
                        var end;
                        //要显示10个页码
                        if (pb.pageTotal < 10) {
                            //如果总页码都没有10页，就显示全部
                            begin = 1;
                            end = pb.pageTotal;
                        } else {
                            //总页码超过10页
                            begin = pb.pageNo - 5;
                            end = pb.pageNo + 4;
                            //如果前边不够5个，后边补齐10个
                            if (begin < 1) {
                                begin = 1;
                                end = begin + 9;
                            }
                            //如果后边不足4个，前面补齐10个
                            if (end > pb.pageTotal) {
                                end = pb.pageTotal;
                                begin = end - 9;
                            }
                        }
                        for (var i = begin; i <= end; i++) {
                            var span;
                            //判断当前页码是否等于i
                            //创建不同格式的页码li
                            if (pb.pageNo == i) {
                                span = ' <a href="javascript:getpageByType('+i+',\''+t_id+'\','+t_t+'); void(0);" class="cur" οnclick="getpageByType(\''+i+'\','+t_id+'\','+t_t+')" id="page'+i+' ">' + i + '</a>';
                            } else {
                                span = ' <a href="javascript:getpageByType('+i+',\''+t_id+'\','+t_t+'); void(0);" οnclick="getpageByType('+i+'\','+t_id+'\','+t_t+')" id="page'+i+'">' + i + '</a>';
                            }
                            spans += span;
                        }
                        var nextPage = pb.pageNo + 1;
                        if (nextPage > pb.pageTotal) {
                            nextPage = pb.pageTotal;
                            var next = '<a href="javascript:getpageByType('+nextPage+',\''+t_id+'\','+t_t+'); void(0);" οnclick="javascript:getpageByType('+nextPage+',\''+t_id+'\','+t_t+')" class="down noClick"><i>下一页</i></a>';
                        }else{
                            var next = '<a href="javascript:getpageByType('+nextPage+',\''+t_id+'\','+t_t+'); void(0);" οnclick="javascript:getpageByType('+nextPage+',\''+t_id+'\','+t_t+')" class="down"><i>下一页</i></a>';
                        }
                        spans += next;
                        $("#pagechange").html(spans);
                        //列表数据展示
                        var book_ps = "";
                        for (var i = 0; i < pb.pageItems.length; i++) {
                            var book = pb.pageItems[i];
                            var p ='<div class="list-item">' +
                                '<img src='+book.imgPath+' alt="" >\n'  +
                                '<p><span>书名:</span><span>'+book.bookName+'</span></p>\n'+
                                '<p><span>作者:</span><span>'+book.author+'</span></p>\n'+
                                '<p><span>价格:</span><span>'+book.price+'</span></p>\n'+
                                '<p><span>销售:</span><span>'+book.sales+'</span></p>\n'+
                                '<p><span>库存:</span><span>'+book.stock+'</span></p>\n'+
                                '<button value="'+book.bookId+'" onclick="addBookToCart()" >加入购物⻋</button>\n'+
                                '</div>'
                            book_ps += p;
                        }
                        $(".list-content").html(book_ps);
                    });
                };
                // jquery 关键字搜索查询
                function getpageByKey(currentPage) {
                    var keyVal=$("#keyInput").val();
                    //发送ajax请求
                    $.get("http://localhost:8080/bookstore/bookManager", {
                        pageNo: currentPage,
                        key: keyVal,
                        method: 'pageByKey'
                    }, function (pb) {
                        //解析Pagebean数据，展示到页面上
                        //分页工具条数据展示
                        //1.1展示总页码
                        $("#totalPage").html(pb.pageTotal);
                        $("#bookCount").html(pb.itemsCount);
                        $("#pageNoInput").attr("value",pb.pageNo);
                        $("#keyInput").attr("value",keyVal);
                        var spans = "";
                        //计算上一页的页码
                        var beforeNum = pb.pageNo - 1;
                        if (beforeNum <= 0) {
                            beforeNum = 1;
                            var pre = '<a href="javascript:getpageByKey('+beforeNum+'); void(0);" οnclick="javascript:getpageByKey('+beforeNum+')" class="up noClick"><i>上一页</i></a>';
                        }else{
                            var pre = '<a href="javascript:getpageByKey('+beforeNum+'); void(0);" οnclick="javascript:getpageByKey('+beforeNum+')" class="up"><i>上一页</i></a>';
                        }
                        //上一页
                        spans += pre;
                        //1.2展示分页页码
                        /*
                        一共展示10个页码，能够达到前5后4的效果
                        如果前面不够5个，后面补齐总数到10个
                        如果后面不足4个，前边补齐总数到10个
                        */
                        //定义开始位置 begin，结束位置 end
                        var begin;
                        var end;
                        //要显示10个页码
                        if (pb.pageTotal < 10) {
                            //如果总页码都没有10页，就显示全部
                            begin = 1;
                            end = pb.pageTotal;
                        } else {
                            //总页码超过10页
                            begin = pb.pageNo - 5;
                            end = pb.pageNo + 4;
                            //如果前边不够5个，后边补齐10个
                            if (begin < 1) {
                                begin = 1;
                                end = begin + 9;
                            }
                            //如果后边不足4个，前面补齐10个
                            if (end > pb.pageTotal) {
                                end = pb.pageTotal;
                                begin = end - 9;
                            }
                        }
                        for (var i = begin; i <= end; i++) {
                            var span;
                            //判断当前页码是否等于i
                            //创建不同格式的页码li
                            if (pb.pageNo == i) {
                                span = ' <a href="javascript:getpageByKey('+i+'); void(0);" class="cur" οnclick="load('+i+')" id="page'+i+'">' + i + '</a>';
                            } else {
                                span = ' <a href="javascript:getpageByKey('+i+'); void(0);" οnclick="getpageByKey('+i+')" id="page'+i+'">' + i + '</a>';
                            }
                            spans += span;
                        }
                        var nextPage = pb.pageNo + 1;
                        if (nextPage > pb.pageTotal) {
                            nextPage = pb.pageTotal;
                            var next = '<a href="javascript:getpageByKey('+nextPage+'); void(0);" οnclick="javascript:getpageByKey('+nextPage+')" class="down noClick"><i>下一页</i></a>';
                        }else{
                            var next = '<a href="javascript:getpageByKey('+nextPage+'); void(0);" οnclick="javascript:getpageByKey('+nextPage+')" class="down"><i>下一页</i></a>';
                        }
                        spans += next;
                        $("#pagechange").html(spans);
                        //列表数据展示
                        var book_ps = "";
                        for (var i = 0; i < pb.pageItems.length; i++) {
                            var book = pb.pageItems[i];
                            var p ='<div class="list-item">' +
                                '<img src='+book.imgPath+' alt="" >\n'  +
                                '<p><span>书名:</span><span>'+book.bookName+'</span></p>\n'+
                                '<p><span>作者:</span><span>'+book.author+'</span></p>\n'+
                                '<p><span>价格:</span><span>'+book.price+'</span></p>\n'+
                                '<p><span>销售:</span><span>'+book.sales+'</span></p>\n'+
                                '<p><span>库存:</span><span>'+book.stock+'</span></p>\n'+
                                '<button value="'+book.bookId+'" onclick="addBookToCart()" >加入购物⻋</button>\n'+
                                '</div>'
                            book_ps += p;
                        }
                        $(".list-content").html(book_ps);

                    });
                };
            </script>
            <script>
                getpageByType(1,'001003',1);
            </script>
            <div class="books-list ">
                <div class="w">
                    <div class="list">
                        <div class="list-header">
                            <div class="title">图书列表</div>
                        </div>
                        <div class="list-content">
                        </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!--  内容部分 end         -->
        <!--  翻页 start         -->
        <div class="changepage">
            <span id="pagechange">
                <a class="up"><i>上一页</i></a>
                <a class="cur">1</a>
                <a href="">2</a>
                <a href="">3</a>
                <a class="noBg">...</a>
                <a href="" class="down"><i>下一页</i></a>
            </span>
        </div>
        <!--  翻页 start         -->

    </body>
</html>